<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<style>
	#father{
		border:1px solid #f00;
		/*
		1、把父盒子设置成伸缩布局
		2、子元素水平排列
		*/
		width: 500px;
		height:400px;
		/*position: relative;*/
		display: flex;
	/*//	justify-content: center;!*伸缩盒子的居中方式上下左右*!*/
		justify-content: space-between;
		align-items: center;
	}
	.son{
		width:100px;
		height:100px;
		background: #ccc;
		border:1px solid blue;
		display: flex;
		justify-content: center;/*伸缩盒子的居中方式上下左右*/
		align-items: center;
		/*position: absolute;*/
		/*top:50%;*/
		/*left:50%;*/
		/*transform: translate(-50%,-50%);!*老方式实现居中布局css3*!*/

	}
</style>
<body>
 <div id="father">
	 <div class="son">盒子</div>
	 <div class="son"></div>
	 <div class="son">盒子</div>
	 <div class="son"></div>
	 <!--<div class="son"></div>-->
	 <!--<div class="son"></div>-->
 </div>
</body>
</html>